<template>
  <div v-loading="isLoading > 0" class="page-container">
    <page-tools>
      <template #left>
        <!-- <span>总记录数: {{ total }} 条</span> -->
      </template>
      <template #right>
        <el-button type="primary" size="mini" @click="addZhSpeech">新增语音</el-button>
      </template>
    </page-tools>

    <el-card style="margin-top: 10px;">
      <el-table :data="zhSpeechList" border>
        <el-table-column label="序号" type="index" fixed="left" width="60" sortable />
        <el-table-column label="中文" width="200">
          <template #default="{ row }">
            <el-button type="text" size="small" @click="playAudio(row.url)">{{ row.zh }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="URL" width="200" prop="url" />
        <el-table-column label="声音类型" width="200" prop="voice_type" />
        <el-table-column label="操作" fixed="right">
          <template #default="{ row }">
            <el-button type="text" size="small" @click="editZhSpeech(row)">编辑</el-button>
            <el-button type="text" size="small" @click="clickDel(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <div style="height: 60px; margin-top: 10px">
        <el-pagination
          :current-page="formSearch.page_num"
          :page-sizes="[10, 20, 30, 50, 100]"
          :page-size="formSearch.page_size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <add-edit ref="AddEditDialog" @refresh="getZhSpeechList" />
  </div>
</template>

<script>
const formSearch = {
  id: '',
  page_num: 1,
  page_size: 10
}
import { getZhSpeechList, deleteOneZhSpeech } from '@/api/zh_speech'
import { formatTime } from '@/filters/index'
import AddEdit from './components/AddEdit.vue'
export default {
  name: 'ZhSpeechList',
  components: {
    AddEdit
  },
  filters: {
    formatTime
  },
  data() {
    return {
      formSearch: {},
      isLoading: 0,
      zhSpeechList: [],
      audio: null,
      total: 0
    }
  },
  computed: {},
  watch: {},
  created() {
    this.initFormSearch()
    this.getZhSpeechList()
  },
  mounted() {},
  methods: {
    initFormSearch() {
      this.formSearch = Object.assign({}, formSearch, this.$route.query)
      this.formSearch.page_num = Number.parseInt(this.formSearch.page_num)
      this.formSearch.page_size = Number.parseInt(this.formSearch.page_size)
    },
    changeQuery() {
      // 获取当前的query参数
      const currentQuery = this.$route.query

      // 将新的筛选条件合并到query参数中
      const newQuery = Object.assign({}, currentQuery, this.formSearch)

      // 使用Vue Router的replace方法更新URL
      this.$router.replace({ query: newQuery })
    },
    onResetForm() {
      this.formSearch = { ...formSearch }
      this.changeQuery()
      this.getZhSpeechList()
    },
    onSearch() {
      this.formSearch.page_num = 1
      this.formSearch.page_size = 10
      this.changeQuery()
      this.getZhSpeechList()
    },
    addZhSpeech() {
      this.$refs.AddEditDialog.open()
    },
    editZhSpeech(row) {
      this.$refs.AddEditDialog.open(row)
    },
    clickDel(row) {
      this.$confirm('确定要进行次操作么？', '温馨提示').then(async() => {
        this.isLoading++
        await deleteOneZhSpeech(row.id)
        await this.getZhSpeechList()
        this.isLoading--
      }).catch(() => {
        console.log('取消')
      })
    },
    async getZhSpeechList() {
      try {
        this.isLoading++
        const { id, page_num, page_size } = this.formSearch
        const res = await getZhSpeechList({
          id: id ? Number.parseInt(id) : null,
          page_num: Number.parseInt(page_num),
          page_size: Number.parseInt(page_size)
        })
        this.total = res.total
        // res.list.forEach(this.handleZhSpeechAudioPath)
        this.zhSpeechList = res.list
      } finally {
        this.isLoading--
      }
    },
    playAudio(audio_url) {
      // console.log(row.url)
      this.$nextTick(() => {
        this.audio = new Audio(audio_url)
        // this.audio.playbackRate = 0.8
        setTimeout(() => {
          this.audio.play()
        }, 100)
      })
    },
    indexMethod(index) {
      return index + 1 + (this.formSearch.page_num - 1) * this.formSearch.page_size
    },
    handleSizeChange(val) {
      this.formSearch.page_num = 1
      this.formSearch.page_size = val
      this.changeQuery()
      this.getZhSpeechList()
    },
    handleCurrentChange(val) {
      this.formSearch.page_num = val
      this.changeQuery()
      this.getZhSpeechList()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
